<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>盒子阴影</title>
  <style>
    /* CSS3 中新增 box-shadow 用来设置盒子的阴影
    语法：
      box-shadow: h-shadow v-shadow blur spread color inset;

      h-shadow:【必需】，水平阴影的位置，允许负值
      v-shadow:【必需】，垂直阴影的位置，允许负值
      blur:【可选】，模糊距离
      spread:【可选】，阴影的尺寸
      color:【可选】，阴影的颜色
      inset:【可选】，将外部阴影(outset)改为内部阴影
    
    注意：
      1. 默认的时外阴影(outset)，但是不可以写这个单词，否则阴影无效
      2. 盒子阴影不占用空间，不会影响其他盒子排列
     */


    div {
      width: 200px;
      height: 200px;
      background-color: pink;
      margin: 100px auto;
      /* 随便给个值，查看盒子阴影效果，然后再调整 */
      /* box-shadow: 10px 10px 10px 10px; */
      /* rgba(0, 0, 0, 1) 是默认颜色 */
      /* box-shadow: 10px 10px 20px rgba(0, 0, 0, 1); */
      /* 通过a(透明度)调节阴影颜色，这个值为小数，小数前面的0可以省略 */
      /* box-shadow: 10px 10px 20px rgba(0, 0, 0, .3); */
    }

    /* 当鼠标移动在盒子上时，显示盒子阴影
    阴影显示效果生硬，以后学了css动画再调整 */
    div:hover {
      box-shadow: 10px 10px 20px rgba(0, 0, 0, .3);
    }
  </style>
</head>
<body>
  <div></div>
</body>
</html>